<template>
	<view class="container">
		<!-- 小程序头部兼容 -->
		<!-- #ifdef MP  -->
		<!-- <view class="mp-search-box">
			<navigator url="/pages/product/search" hover-class="none">
				<input class="ser-input" type="text" value="输入关键字搜索" disabled />
			</navigator>
		</view> -->
		<!-- #endif -->

		<!-- 标签导航 -->
		<view class="navsContent">
			<u-tabs :list="navList" @click="tabtap" @change="change" :current="current">
			</u-tabs>
		</view>
		<view v-if="articleList.length === 0" style="text-align: center; background-color: #fff;">
			暂无数据
		</view>
		<!-- 公告 -->
		<view class="rotationAnnouncement">
			<view class="newsTitle" v-for="(item, index) in articleList" :key="item.id" @click="goDetail(item.id)">
				<view class="noticesBox">
					<view class="articleDetails">
						<view class="">
							<!-- <span class="articleNo">NO.{{item.id}}</span> -->
							<span class="articleText"> {{item.title}}</span>
						</view>
					</view>
					<view class="degreeHeatCss">
						{{item.heat}} 热度
					</view>
				</view>
				<view class="imgBox">
					<image :src="item.imgUrl" style="width: 100%; height: 100%"></image>
				</view>
			</view>
		</view>
		<!-- 回到顶部 -->
		<view class="wrap">
			<u-back-top :scroll-top="scrollTop"></u-back-top>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navList: [],
				articleList: [],
				// 回到顶部样式
				scrollTop: 0,
				articleClassId: 0,
				needReflesh:false,
				optionId:0,
				current:0
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad(options) {
			// this.getNoticePageList()
			// this.getInformationPageList()
			this.getNavList()
			// console.log(getApp().globalData.paramsData)
			// this.newsId = getApp().globalData.paramsData.id
			// this.current = getApp().globalData.paramsData.current
			// console.log(this.newsId)
		},
		onShow() {
			let option = uni.getStorageSync('option')
			console.log(option);
			this.optionId = option.id
			this.current = 2
			this.articleClassId = this.optionId
			this.getArticleList()
			// this.getNavList()
		},
		// 底部tab点击事件
		onTabItemTap() {
			if(this.needReflesh) {
				this.getNavList()
				this.current = 0
			} else {
				this.needReflesh = true
			}
		},
		onHide() {
			this.needReflesh = false
		},
		methods: {
			change(e){
				this.current = e.index
			},
			getNavList(){
				const that = this
				that.$api.request('article', 'articleType').then(res => {
					this.navList = res.data
					this.articleClassId = this.navList[0].id
					this.getArticleList()
				})
			},
			tabtap(item) {
				this.articleClassId = item.id
				this.getArticleList()
			},
			// 获取文章列表
			getArticleList(){
				uni.showLoading({
					title: "正在加载",
				});
				this.$api.request('article', 'articlePage', {
					articleClassId: this.articleClassId
				}).then(res => {
					uni.hideLoading();
					this.articleList = res.data.items
					console.log(this.articleList);
				})
			},
			goDetail(id) {
				uni.navigateTo({
					url: '/pages/news/detail?id=' + id
				})
			}
		}
	}
</script>

<style lang='scss'>
	.container {
		margin-top: 50rpx;
		background-color: #eee;
	}

	/* #ifdef MP */
	.mp-search-box {
		width: 100%;
		padding: 0 80upx;
		margin-top: 50rpx;
		background-color: #fff;


		.ser-input {
			flex: 1;
			height: 56upx;
			line-height: 56upx;
			text-align: center;
			font-size: 28upx;
			color: $font-color-base;
			border-radius: 20px;
			background: rgba(238, 240, 242, 0.6);
			width: 100%;
		}
	}

	page {
		.cate-section {
			position: relative;
			z-index: 5;
			border-radius: 16upx 16upx 0 0;
			margin-top: -20upx;
		}

		.carousel-section {
			padding: 0;

			.titleNview-placing {
				padding-top: 0;
				height: 0;
			}

			.carousel {
				.carousel-item {
					padding: 0;
				}
			}

			.swiper-dots {
				left: 45upx;
				bottom: 40upx;
			}
		}

		.post-section {
			margin-top: 16upx;
			height: 60upx;
			line-height: 60upx;
			background-color: white;
			padding-left: 20upx;

			.content {
				height: 60upx;
				line-height: 60upx;
				font-size: 28upx;
				text-overflow: ellipsis;
				overflow: hidden;
				color: $uni-color-primary;
				white-space: nowrap;
			}
		}
	}

	/* #endif */

	.articleDetails {
		position: relative;
		height: 100rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		/* 将对象作为弹性伸缩盒子模型显示 */
		display: -webkit-box;
		/* 限制在一个块元素显示的文本的行数 */
		/* -webkit-line-clamp 其实是一个不规范属性，使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；*/
		-webkit-line-clamp: 2;
		/* 设置或检索伸缩盒对象的子元素的排列方式 */
		-webkit-box-orient: vertical;


	}

	.degreeHeatCss {
		/* font-size: 20rpx;
		margin-top: 30rpx;
		color: rgb(153, 153, 153); */
		margin-top: 10rpx;
		color: #999;
		font-size: 13px;
		overflow: hidden;

	}

	.navsContent {
		background-color: #fff;
		padding: 40rpx 0 10rpx 0;
	}

	.rotationAnnouncement {

		.noticesBox {
			display: flex;
			padding-right: 8px;
			flex: 1;
			color: #3b4144;
			flex-direction: column;
			justify-content: space-between;
			overflow: hidden;

		}

		.newsTitle {
			margin-top: 10rpx;
			padding: 30rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-between;

			.articleNo {
				font-size: 26rpx;
				background-color: #fef0f0;
				color: #f56c6c;
				padding: 5rpx 10rpx;
			}

			.articleText {
				/* margin: 0 10rpx; */
				line-height: 25px;
				font-size: 30rpx;
				font-weight: 800;
			}

			.imgBox {
				flex-shrink: 0;
				/* margin-right: 11px; */
				width: 125px;
				height: 75px;
				border-radius: 6px;
				overflow: hidden;
				/* border: 1px #f5f5f5 solid; */
			}
		}

		.cardCss {
			padding: 0 30rpx;

			.contentCss {
				font-size: 30rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
			}
		}
	}

	.listItems {
		display: flex;
		font-size: 17px;
		position: relative;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		flex-direction: row;
		cursor: pointer;
		margin-top: 10rpx ;

		.listBox {
			position: relative;
			display: flex;
			flex-direction: column;
			padding: 13px 16px;
			padding-left: 16px;
			flex: 1;
			overflow: hidden;
		}
		.listTitle{
			display: flex;
			margin-bottom: 8px;
			font-size: 17px;
			font-weight: bold;
			color: #3b4144;
		}
		.listImg{
			height: 260rpx;
			#imgCss{
				width: 100%;height: 100%;			
				border-radius:20rpx;
			}
		}
		.listDesc{
			margin-top:10rpx;
			color: #999;
			font-size: 13px;
			overflow: hidden;
		}
	}
</style>
